<template>
	<view class="continer">
		<view class="font-30 pt-20 flex flex-center font-weight-600 height-140">
			洪梅镇-车辆告警
		</view>
		<nut-searchbar @focus="bindSearchFocus" :clearable="false" background="transparent" input-background="#fff"
			placeholder="输入公司、类型、车型、车牌等进行搜索" v-model="searchValue">
			<template #leftin>
				<nut-icon name="search2" />
			</template>
		</nut-searchbar>
		<v-tabs class="radius-70 mb-16" v-model="tabValue" :tabs="tabs" pillsBorderRadius="70rpx" :pills="true"
			activeColor="#fff" @change="changeTab" color="#00aaff" :scroll="false" field="name"></v-tabs>
		<view class="bg-fff radius-16 overflow-h">
			<view class="bg-error text-center height-80 line-height-80 font-24 color-error">
				共 {{12}} 告警<text class="width-48 inline-block"></text>
				超速:{{12}}<text class="width-48 inline-block"></text>
				禁行:{{8}}<text class="width-48 inline-block"></text>
				停留:{{12}}
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
			<view v-for="(item,index) in list" :key="item.warningInfoId" class="bg-fff radius-16 padding-30 mb-24">
				<view class="flex flex-a-center flex-j-bt width-fill mb-16">
					<nut-tag type="danger" class="no-wrap mr-32">{{item.warningTypeName}}</nut-tag>
					<text class="color-666 ellipsis-1">{{item.addressDetail}}</text>
				</view>
				<view class="flex flex-a-center flex-j-bt width-fill mb-16">
					<text class="font-28 font-weight-600">{{item.truckLicenseNo}}</text>
					<text class="color-666">{{item.createDate}}</text>
				</view>
				<view class="color-666 mb-16 ellipsis-1">{{item.alarmInfo}}</view>
				<view class="flex flex-a-center flex-j-bt width-fill">
					<text class="font-28 font-weight-600" :style="{color:getStatusColor(item.sts)}">●
						{{getStatus(item.sts)}}</text>
					<nut-button @tap="toDetail(item)" size="small" type="primary">查看</nut-button>
				</view>
			</view>
			<view class="height-10"></view>
		</scroll-view>
	</view>
	<nut-popup closeable round :custom-style="{ height: '700rpx',width:'700rpx' }" v-model:visible="showSearchPop">
		<nut-form>
			<nut-form-item label="车牌号">
				<nut-input v-model="searchFormData.headLicensePlateNo" class="nut-input-text" placeholder="请输入车牌号"
					type="text" />
			</nut-form-item>
			<nut-form-item label="公司">
				<simplePicker @confirm="pickerConfirm('agentId',$event)" :defaultValue="searchFormData.agentId"
					:columns="subAgentList" valueKey="agentId" labelKey="agentName"></simplePicker>
			</nut-form-item>
			<nut-form-item label="告警类型">
				<simplePicker @confirm="pickerConfirm('warningTypeCode',$event)" :defaultValue="searchFormData.warningTypeCode"
					:columns="warningTypeList" valueKey="code" labelKey="name"></simplePicker>
			</nut-form-item>
			<nut-form-item label="告警围栏">
				<simplePicker @confirm="pickerConfirm('addressAlias',$event)" :defaultValue="searchFormData.addressAlias"
					:columns="addressAliasList" valueKey="custAddressId" labelKey="addressAlias"></simplePicker>
			</nut-form-item>
			<nut-form-item label="车型">
				<simplePicker @confirm="pickerConfirm('truckType',$event)" :defaultValue="searchFormData.truckType"
					:columns="vehicleTypeList" valueKey="sysEntityId" labelKey="sysEntityName"></simplePicker>
			</nut-form-item>
			<nut-form-item label="告警时间">
				<picker mode="date" :value="searchFormData.warningTime" @change="pickerConfirm('warningTime',$event.detail)">
					<view :style="{color:searchFormData.warningTime?'var(--nut-black, #000)':'gray'}">
						{{searchFormData.warningTime || '请选择日期'}}
					</view>
				</picker>
			</nut-form-item>
		</nut-form>
		<view class="text-center">
			<nut-button @tap="searchReset" type="warning" class="mr-16">重置</nut-button>
			<nut-button @tap="searchSubmit" type="primary">查询</nut-button>
		</view>
	</nut-popup>
	<tabBar></tabBar>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watch
	} from "vue";
	import {
		getVehicleWarnList
	} from '@/api/vehicleWarning.js'
	import {
		storeToRefs
	} from 'pinia'
	import useSelectOptions from '@/stores/useSelectOptions.js'

	const store = useSelectOptions()

	const agentId = uni.getStorageSync('_agentId');

	const {
		subAgentList,
		addressAliasList,
		vehicleTypeList,
		warningTypeList
	} = storeToRefs(store)

	store.getSubAgentList()
	store.getAddressAliasList()
	store.getVehicleTypeList()

	const showSearchPop = ref(false)
	const searchFormData = reactive({
		agentId: agentId, //公司
		warningTypeCode: '', //告警类型
		addressAlias: '', //告警围栏
		truckType: '', //车型
		headLicensePlateNo: '', //车牌号
		warningTime: '', //告警时间
	})

	const sts = ref("todo"); //处理状态 todo未处理，process处理中，complete完成

	const searchValue = computed(() => {
		return Object.keys(searchFormData).filter(item => item != 'agentId').map(key => searchFormData[key]).filter(
			item => item).length ? '点击查看搜索条件' : ''
	})

	const page = ref(1);
	const list = ref([]);

	const tabs = ref([{
			id: 'todo',
			name: '待处理'
		},
		{
			id: 'process',
			name: '处理中'
		},
		{
			id: 'complete',
			name: '已处理'
		}
	])
	const tabValue = ref(tabs.value.findIndex(item => item.id === sts.value))

	watch(tabValue, (val) => {
		sts.value = tabs.value[val].id
		page.value = 1
		list.value = []
		getList()
	})


	const getList = async () => {
		const data = await getVehicleWarnList({
			page: page.value,
			sts: sts.value,
			...searchFormData,
		}).catch(() => {
			page.value--
		})
		if (!data.list?.length) {
			page.value--
		} else {
			list.value.push(...data.list)
		}
	}

	getList();

	const searchReset = (e) => {
		page.value = 1;
		list.value = [];
		Object.keys(searchFormData).forEach(key => {
			searchFormData[key] = ''
		})
		getList()
	}
	const searchSubmit = (e) => {
		page.value = 1
		list.value = []
		getList()
		showSearchPop.value = false
	}

	const bindSearchFocus = () => {
		showSearchPop.value = true
	}

	const changeTab = (e) => {
		console.log(0, e)
	}

	const pickerConfirm = (key, {
		value
	}) => {
		if (key == 'agentId') {
			searchFormData[key] = agentId
		} else {
			searchFormData[key] = value
		}
	}

	const lower = (e) => {
		page.value++
		getList();
	}

	const toDetail = (item) => {
		uni.setStorageSync('_currWarningInfo', item)
		uni.navigateTo({
			url: `/pages/warningDetail/warningDetail?warningInfoId=${item.warningInfoId}`
		});
	}

	const getStatus = (sts) => {
		return {
			APPROVE: '已通过',
			TRANSFER: '已转派',
			COMPLETE: '已完结',
			REJECT: '已驳回'
		} [sts] || sts
	}

	const getStatusColor = (sts) => {
		return {
			APPROVE: '#4fc08d',
			TRANSFER: '#fa6419',
			COMPLETE: '#007aff',
			REJECT: '#fa2c19'
		} [sts] || '#007aff'
	}
</script>

<style scoped lang="scss">
	.continer {
		.scroll-Y {
			height: calc(100vh - 525rpx);
			margin-top: 16rpx;
		}
	}
</style>